<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	
	/*每个页面公共css */
	view,
	image,
	button,
	text,
	input,
	textarea,
	swiper,
	scroll-view {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.flex_box {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		width: 100%;
	}
	
	.flex_box .item {
		display: block;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}
	
	/**flex 设置**/
	.fldr {
		flex-direction: row;
		-webkit-flex-direction: row;
	}
	
	.fldc {
		flex-direction: column;
		-webkit-flex-direction: column;
	}
	
	.fldrr {
		flex-direction: row-reverse;
		-webkit-flex-direction: column-reverse
	}
	
	.jcsb {
		justify-content: space-between;
		-webkit-justify-content: space-between;
	}
	
	.jcsba {
		justify-content: space-around;
		-webkit-justify-content: space-around;
	}
	
	.jcfs {
		justify-content: flex-start;
		-webkit-justify-content: flex-start;
	}
	
	.jcc {
		justify-content: center;
		-webkit-justify-content: center
	}
	
	.jcfe {
		justify-content: flex-end;
		-webkit-justify-content: flex-end
	}
	
	.df {
		display: -webkit-flex;
		display: flex
	}
	
	.dif {
		display: inline-flex;
	}
	
	.aic {
		align-items: center;
	}
	
	.aie {
		align-items: flex-end;
	}
	
	.jcc {
		justify-content: center;
	}
	
	.fw {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	
	.clamp_1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: box;
		box-orient: vertical;
		line-clamp: 1;
		overflow: hidden;
	}
	
	.clamp_2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: box;
		box-orient: vertical;
		line-clamp: 2;
		overflow: hidden;
	}
	
	.clamp_3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
		display: box;
		box-orient: vertical;
		line-clamp: 3;
		overflow: hidden;
	}
	
	.clamp_4 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		text-overflow: ellipsis;
		display: box;
		box-orient: vertical;
		line-clamp: 4;
		overflow: hidden;
	}
	
	.ell {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.vm {
		vertical-align: middle;
	}
	
	.vt {
		vertical-align: top;
	}
	
	/**字体**/
	.fs0 {
		font-size: 0;
	}
	
	.fs12 {
		font-size: 12rpx;
	}
	
	.fs14 {
		font-size: 14rpx;
	}
	
	.fs16 {
		font-size: 16rpx;
	}
	
	.fs18 {
		font-size: 18rpx;
	}
	
	.fs20 {
		font-size: 20rpx;
	}
	
	.fs22 {
		font-size: 22rpx;
	}
	
	.fs24 {
		font-size: 24rpx;
	}
	
	.fs26 {
		font-size: 26rpx;
	}
	
	.fs28 {
		font-size: 28rpx;
	}
	
	.fs30 {
		font-size: 30rpx;
	}
	
	.fs32 {
		font-size: 32rpx;
	}
	
	.fs34 {
		font-size: 34rpx;
	}
	
	.fs36 {
		font-size: 36rpx;
	}
	
	.fs40 {
		font-size: 40rpx;
	}
	
	.fs48 { font-size: 48rpx; }
	.fs56 { font-size: 56rpx; }
	
	.wp100 { width: 100%; }
	.wp25 { width: 25%; }
	
	.hp100 { height: 100%; }
	
	.lh32 { line-height: 32rpx; }
	.lh40 { line-height: 40rpx; }
	.lh48 { line-height: 48rpx; }
	.lh52 { line-height: 52rpx; }
	
	.re { position: relative; }
	
	.ov { overflow: hidden; }
	
	.fwb { font-weight: bold; }
	.tal { text-align: left; }
	.tac { text-align: center; }
	.tar { text-align: right; }
	
	.mt5 { margin-top: 5rpx; }
	.mt10 { margin-top: 10rpx; }
	.mt15 { margin-top: 15rpx; }
	.mt20 { margin-top: 20rpx; }
	.mt24 { margin-top: 24rpx; }
	.mt28 { margin-top: 28rpx; }
	.mt32 { margin-top: 32rpx; }
	.mt34 { margin-top: 34rpx; }
	.mt36 { margin-top: 36rpx; }
	.mt40 { margin-top: 40rpx; }
	.mt48 { margin-top: 48rpx; }
	.mt52 { margin-top: 52rpx; }
	.mt60 { margin-top: 60rpx; }
	
	.ml5 { margin-left: 5rpx; }
	.ml10 { margin-left: 10rpx; }
	.ml15 { margin-left: 15rpx; }
	.ml25 { margin-left: 25rpx; }
	.ml35 { margin-left: 35rpx; }
	.ml50 { margin-left: 50rpx; }
	
	.mr5 { margin-right: 5rpx; }
	.mr10 { margin-right: 10rpx; }
	.mr15 { margin-right: 15rpx; }
	.mr20 { margin-right: 20rpx; }
	.mr30 { margin-right: 30rpx; }
	.mr32 { margin-right: 32rpx; }
	.mr36 { margin-right: 36rpx; }
	
	.mb24 { margin-bottom: 24rpx; }
	.mb32 { margin-bottom: 32rpx; }
	
	.pa24 { padding: 24rpx; }
	.pa32 { padding: 32rpx; }
	
	.pt10 { padding-top: 10rpx; }
	.pt16 { padding-top: 16rpx; }
	.pt20 { padding-top: 20rpx; }
	.pt24 { padding-top: 24rpx; }
	.pt26 { padding-top: 26rpx; }
	.pt32 { padding-top: 32rpx; }
	.pt40 { padding-top: 40rpx; }
	
	.pb10 { padding-bottom: 10rpx; }
	.pb16 { padding-bottom: 16rpx; }
	.pb20 { padding-bottom: 20rpx; }
	.pb24 { padding-bottom: 24rpx; }
	.pb26 { padding-bottom: 26rpx; }
	.pb32 { padding-bottom: 32rpx; }
	.pb40 { padding-bottom: 40rpx; }
	
	.pl10 { padding-left: 10rpx; }
	.pl20 { padding-left: 20rpx; }
	.pl24 { padding-left: 24rpx; }
	.pl30 { padding-left: 30rpx; }
	.pl32 { padding-left: 32rpx; }
	.pl40 { padding-left: 40rpx; }
	
	.pr10 { padding-right: 10rpx; }
	.pr20 { padding-right: 20rpx; }
	.pr24 { padding-right: 24rpx; }
	.pr30 { padding-right: 30rpx; }
	.pr32 { padding-right: 32rpx; }
	.pr40 { padding-right: 40rpx; }
	
	.bt1 { border-top: 1px solid #eee; }
	
	.bb1 { border-bottom: 1px solid #eee; }
	.bb2 { border-bottom: 1px solid #F0F5F7; }
	
	.cor_333 { color: #333; }
	.cor_666 { color: #666; }
	.cor_999 { color: #999; }
	.cor_F52 { color: #F5220F; }
	.cor_fff { color: #fff; }
	.cor_000 { color: #000; }
	
	.img_1 { width: 20rpx; height: 20rpx; }
	.img_2 { width: 80rpx; height: 80rpx; }
	.img_3 { width: 32rpx; height: 32rpx; }
	.img_4 { width: 24rpx; height: 24rpx; }
	.img_5 { width: 40rpx; height: 40rpx; }
	.img_6 { width: 72rpx; height: 72rpx; }
	.img_7 { width: 28rpx; height: 28rpx; }
	.img_8 { width: 30rpx; height: 30rpx; }
	.img_9 { width: 64rpx; height: 64rpx; }
	
	.up_tag_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28rpx;
		height: 28rpx;
		font-size: 20rpx;
		color: #fff;
		background-color: #F5220F;
		border-radius: 8rpx;
	}
	
	.txt_hor_sty {
		position: relative;
		display: inline-flex;
		.txt_1 {
			position: relative;
			padding: 0 4rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #121212;
			z-index: 2;
		}
		&::after {
			content: "";
			position: absolute;
			bottom:4rpx;
			left: 0;
			width: 100%;
			height: 16rpx;
			background: #F5220F;
			z-index: 1;
		}
	}
	
	.pedometer_box {
		position: relative;
		display: flex;
		align-items: center;
		.add_btn,.reduce_btn {
			position: relative;
			display: flex;
			justify-content: center;
			width: 48rpx;
			height: 48rpx;
			line-height: 36rpx;
			font-size: 40rpx;
			color: #999999;
			background: #FEFFFE;
			border: 2rpx solid #E0E0E0;
			border-radius: 50%;
			&.current.add_btn, &.current.reduce_btn{
				color: #fff;
				background-color: #F5220F;
				border-color: #F5220F;
			}
		}
		.ipt_num {
			position: relative;
			padding: 0 10rpx;
			min-width: 60rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			margin-left: 6rpx;
			margin-right: 8rpx;
		}
	}
	
	.up_btn_1,.up_btn_2 {
		position: relative;
		width: 320rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 32rpx;
		text-align: center;
		border-radius: 8rpx;
	}
	
	.up_btn_1 {
		color: #666;
		background-color: #F2F2F2;
	}
	
	.up_btn_2 {
		color: #fff;
		background: #F5220F;
	}
	
	.tabs_ordere_list {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 12rpx 16rpx;
		background-color: #FCEDED;
		border: 1px solid #fff;
		border-radius: 24rpx;
		.item_tab {
			position: relative;
			width: 210rpx;
			height: 102rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: transparent;
			border-radius: 16rpx;
			&.active {
				background: #fff;
			}
			.tabs_text {
				position: relative;
				.txt_1 {
					position: relative;
					padding: 0 4rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
					z-index: 2;
				}
				&::after {
					content: "";
					display: none;
					position: absolute;
					bottom:4rpx;
					left: 0;
					width: 100%;
					height: 16rpx;
					background: #F5220F;
					z-index: 1;
				}
			}
			&.active .tabs_text::after { display: block; }
		}
	}
	
	.puplic_tabs_list {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 28rpx;
		background: #fff;
		.item_tabs {
			position: relative;
			padding: 0 4rpx;
			height: 48rpx;
			line-height: 48rpx;
			.txt_sty {
				position: relative;
				font-size: 28rpx;
				color: #666;
				z-index: 2;
			}
			.num_pos {
				position: absolute;
				top: -4rpx;
				right: -8rpx;
				min-width: 24rpx;
				height: 24rpx;
				padding: 0 6rpx;
				line-height: 24rpx;
				text-align: center;
				font-size: 16rpx;
				font-weight: bold;
				color: #fff;
				background: #F5220F;
				border-radius: 50%;
				z-index: 2;
			}
			&::after {
				content: "";
				display: none;
				position: absolute;
				bottom:4rpx;
				left: 0;
				width: 100%;
				height: 16rpx;
				background: #F5220F;
				z-index: 1;
			}
			&.active .txt_sty {
				font-weight: bold;
				color: #333;
			}
			&.active::after {
				display: block;
			}
		}
	}
	
	.up_step_data {
		position: relative;
		display: flex;
		width: 100%;
		.up_item_step {
			position: relative;
			width: 20%;
			justify-content: center;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			color: rgba(0,0,0,.5);
			.icon_step_cir {
				position: relative;
				width: 28rpx;
				height: 28rpx;
				background: #CACACA;
				border-radius: 50%;
				margin-left: auto;
				margin-right: auto;
			}
			&::after {
				content: "";
				position: absolute;
				top: 12rpx;
				left: 83rpx;
				width: 116rpx;
				height: 4rpx;
				background: #CACACA;
				z-index: 2;
			}
			&.active {
				color: #F5220F;
				font-weight: bold;
				.icon_step_cir { background-color: #F5220F; }
			}
			&.active::after {
				background-color: #F5220F;
			}
			&:last-child::after { display: none; }
		}
	}
	
</style>
